<template>
    <el-container>
        <el-main>
            <el-form status-icon :model="form" ref="form" :rules="rules" label-position="'left'" >
                <el-form-item label="邮箱" prop="email">
                    <el-input prefix-icon="el-icon-user-solid"  v-model.trim="form.email" placeholder="输入邮箱"
                              autocomplete="true"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password" >
                    <el-input prefix-icon="el-icon-lock"  v-model.trim="form.password" placeholder="输入密码" type="password"
                              ></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="ver_code">
                        <el-input prefix-icon="el-icon-lock"  v-model.trim="form.ver_code" placeholder="输入验证码" style="width: 200px"
                        ></el-input>
                    <div style="float: right">
                        <img :src="img_code" style="width: 120px;" alt="看不清，点我" @click="getLoginVerCode">
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onLogin">登录</el-button>
                    <el-button type="cancel" @click="$emit('iclose')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
    import http from "../utils/req";
    import {ElMessage} from "element-plus/es";
    import router from "../router";
    import userService from "../utils/userService";


    let usage = 'login'
    export default {
        name: "Login",
        event: ['myClose'],
        data(){
            return{
                form: {
                    email: '',
                    password: '',
                    ver_code: ''
                },
                rules:{
                    email: [{required: true,  message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    ver_code: [{required: true, message: '请输入验证码', trigger: 'blur'},
                        { min: 4, max: 4, message: '长度为4个字符', trigger: 'blur' }]
                },
                img_code: ''
            };
        },
        methods: {
            onLogin: function(){
                this.$refs['form'].validate((valid) => {  // 校验数据
                    if (valid) {
                        debugger
                        http.postDataWithSymEnc('/auth/login', this.form).then(res=>{
                            if (res.data.code === 200){
                                let user = res.data.data.user;
                                sessionStorage.setItem("username",res.data.data.user.name);
                                sessionStorage.setItem("type",res.data.data.user.type);
                                sessionStorage.setItem("email",res.data.data.user.email);
                                let to = ''
                                if (user.type === 1){
                                    to = '/researcher'
                                }else if (user.type === 2){
                                    to = '/user'
                                }else {
                                    to = '/user'
                                }
                                userService.setCurrentUser(user);
                                this.$emit('iclose');
                                router.push(to);
                                ElMessage.success({
                                    message: res.data.msg,
                                    type: 'success',
                                    zIndex: -1
                                });
                            }else{
                                ElMessage.warning({
                                    message: res.data.msg,
                                    type: 'warning',
                                    zIndex: -1
                                });
                            }
                        }).catch(reason => {
                            ElMessage.warning({
                                message:reason.message,
                                type: 'warning',
                                zIndex: -1
                            });
                        })
                    }
                });
            },
            getLoginVerCode: function () {
                http.get("/auth/ver_code", {params: {usage: usage}}).then((res)=>{
                    if (res.data.code ===200){
                        this.img_code = res.data.data['code_img'];
                    }else{
                        ElMessage.warning({
                            message: res.data.message,
                            type: 'warning',
                            zIndex: -1
                        });
                    }
                })
            },


        },
        mounted(){
            this.getLoginVerCode()
        }

    }
</script>

<style scoped>
    .el-main{
        min-height: 300px;
    }
</style>